<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import {
    LeftOutlined,
    RightOutlined,
} from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router'
const currentStep = ref(0);
const router = useRouter();
const route = useRoute();
const routeMap = [
    '/',
    '/upload-images',
    '/make',
]
watchEffect(() => {
    currentStep.value = routeMap.findIndex(item => item === route.path)
});

function go (current: number) {
    router.push(routeMap[current])
}
function onBack() {
    router.push(routeMap[currentStep.value - 1])
}
function onNext() {
    router.push(routeMap[currentStep.value + 1])
}
</script>

<template>
    <header>
        <a-button type="primary" shape="circle" @click="onBack" :disabled="currentStep === 0">
            <template #icon>
                <left-outlined />
            </template>
        </a-button>
        <a-steps class="steps" :current="currentStep" @change="go">
            <a-step title="上传logo" />
            <a-step title="上传图片" />
            <a-step title="制作" />
        </a-steps>
        <a-button type="primary" shape="circle" @click="onNext" :disabled="currentStep === 2">
            <template #icon>
                <right-outlined />
            </template>
        </a-button>
    </header>
    <router-view />
</template>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
<style>
body {
    padding: 16px;
}

header {
    width: 100%;
    display: flex;
    align-items: center;
}

header .steps {
    flex: 1;
    margin: 0 16px;
}
</style>
